<template>
  <div id="box">
    <div class="current">
        <!-- 上半部分-当前状态 -->
        <div class="currentStatus">
            <!-- 在离床状态 -->
        <div class="bedstatus currentStatusItem" :class="{ infoContentxinlv: showbedstatusstyle0}">
            <div class="title">当前状态</div>
            <div class="bedcontent">
                <div class="bedstatusText" :class="{ jumping: showbedstatusstyle}">
                离床
                </div>
            </div>
            <div class="statusTime"> 2023-10-01 12:00:00</div>
        </div>
        <!-- 睡眠阶段 -->
        <div class="sleepstatus currentStatusItem" :class="{ infoContentxinlv: showsleepstatusstyle0}">
            <div class="title">睡眠状态</div>
            <div class="content">
                <div class="statusIcon">
                    <img class="statusImg0" src="@/assets/images/nightcare/smjd.png" alt="离床">
                </div>
                <div class="statusText sleepStatusText" :class="{ jumping: showsleepstatusstyle}">
                --
                </div>
            </div>
        </div>
        <!-- 体动幅度 -->
        <div class="bodystatus currentStatusItem" :class="{ infoContentxinlv: showbodystatusstyle0}">
            <div class="title">体动幅度</div>
            <div class="content">
                <div class="statusIcon">
                    <img class="statusImg" style="width: 5rem;height: 5rem;" src="../../assets/images/nightcare/xinhaor0.jpg" alt="">
                </div>
                <div class="statusText bodyStatusText" :class="{ jumping: showbodystatusstyle}">
                    --
                </div>
            </div>
        </div>
        </div>
        <!-- 图表展示模块 -->
        <div class="chartBox">
            <div class="chartItem">
                <div class="title0">
                    <div class="title title1">心率</div>
                    <div>
                        <img src="../../assets/images/nightcare/xinlv.png" style="width:4rem" alt="">
                        <!-- <span class="chartTitle">心率</span> -->
                    </div>
                    <div class="heartRate"><div class="heartRatecount" :class="{ jumping: showhearthratestyle}">--</div><div class="unit">次/分</div></div>
                    <div class="legend"></div>
                </div>
                <div class="chartContent">
                    <!-- 图表内容 -->
                        <div
                        id="heartEchart"
                        :style="{
                            width: '80rem',
                            height: '15rem'
                        }"
                        ></div>
                </div>
            </div>
            <div class="chartItem">
                <div class="title0">
                    <div class="title title1">呼吸率</div>
                    <div>
                        <img src="../../assets/images/nightcare/huxilv.png" style="width:4rem" alt="">
                        <!-- <span class="chartTitle">呼吸率</span> -->
                    </div>
                    <div class="bearthRate"><div class="bearthRatecount" :class="{ jumping: showbreathstyle}">--</div><div class="unit">次/分</div></div>
                    <div class="legend0"></div>
                </div>
                <div class="chartContent">
                    <!-- 图表内容 -->
                        <div
                        id="bearthEchart"
                        :style="{
                            width: '80rem',
                            height: '15rem'
                        }"
                        ></div>
                </div>
            </div>
        </div>
    </div>

    <div class="topIcon" @click="logout">
      <img src="../../assets/images/home/tuichu.png" />
    </div>
  </div>
</template>
<script>
import {  mapState } from "vuex";
// import axios from 'axios' // 安装axios后引入
import mqtt from "mqtt";
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
} from "../../utils/sysconstant";
  import { getNightCareInfo } from "../../api/index";

// mqtt协议规则
const mqttoptions = {
  connectTimeout: 40000,
  clientId: "appmqttjs_" + Math.random().toString(16).substr(2, 8),
  username: MQTT_USERNAME,
  password: MQTT_PASSWORD,
  clean: true,
};
export default {
  name: "night-care",
  data() {
    return {
      Myname: "",
      heartRateData: new Array(181).fill(null), // 心率数据
      bearthRateData:new Array(181).fill(null), // 呼吸率数据
      heartEchart: null, // 心率图表实例
      bearthEchart: null, // 呼吸率图表实例
      // sleepSensorId: "S01B01N985",// 当前用户睡眠传感器ID
      sleepSensorId: "",// 当前用户睡眠传感器ID
      xAxisData:[], // x轴时间数据
      timeid: null, // 定时器ID
      currentBearthData:null,
      currentHearthData:null,
      timeid0: null,
      timeid1: null, // 定时器ID
      timeid2: null, // 定时器ID
      timeid3: null, // 定时器ID
      timeid4: null, // 定时器ID
      timeid5: null, // 定时器ID
      timeid6: null, // 定时器ID
      timeid7: null, // 定时器ID
      showbedstatusstyle: false, // 离床状态文字跳动样式
      showsleepstatusstyle: false, // 睡眠状态文字跳动样式
      showbodystatusstyle: false, // 体动幅度文字跳动样式
      showhearthratestyle: false, // 心率文字跳动样式
      showbreathstyle: false, // 呼吸率文字跳动样式
      showbedstatusstyle0: false, // 离床状态边框闪烁样式
      showsleepstatusstyle0: false, // 睡眠状态边框闪烁样式
      showbodystatusstyle0: false, // 体动状态边框闪烁样式
    };
  },
  props: {
    logoutBtn: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  directives: {
    focus: {
      inserted: function (el, { value }) {
        if (value) {
          el.focus();
        }
      },
    },
  },
  computed: {
    ...mapState({
      currentUserId: (state) => state.currentUserId, //当前的用户id
      loginUserInfo: (state) => state.loginUserInfo,
      userInfoDetails: (state) => state.userInfoDetails, //用户详细信息
      token: (state) => state.token,
    }),
  },
  watch: {
    chat_context_item(val) {
      this.chat_context_item = val;
    },
  },
  created() {
    this.Myname = this.userInfoDetails.account.name;
  },
  mounted() {
    console.log("当前用户id", this.currentUserId);
    this.connectMq();
    this.getSleepSensorId(); // 获取当前住户的夜间看护信息
    this.getHeartRateChart(); // 初始化心率图表
    this.getBearthRateChart(); // 初始化呼吸率图表
    this.getXaxiosData(); // 获取x轴时间数据
  },
  beforeDestroy(){
    if (this.heartEchart || this.bearthEchart) {
      this.heartEchart.dispose();
      this.bearthEchart.dispose();
    }
    window.removeEventListener('resize', this.heartEchart);
    window.removeEventListener('resize', this.bearthEchart);
  },
  methods: {
    getSleepSensorId() {
      getNightCareInfo(this.currentUserId).then((res) => {
          if(res.code == 0) {
            // const { bedState,bedBreath, bedHeartrate,bedSensorID, motion} = res.records
            const { bedState,bedSensorID, motion} = res.records
            this.sleepSensorId = bedSensorID; // 获取当前用户的睡眠传感器ID
            console.log("当前用户的睡眠传感器ID",this.sleepSensorId);
            this.sleepSensorId ? this.connectMq() : ''; // 创建MQ连接
            document.querySelector('.bedstatusText').innerText = bedState == 4 ? '在床' : '离床'
            document.querySelector('.bedcontent').style.color = bedState == 4 ? 'green' : 'red' ;
            document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
            // document.querySelector('.bearthRatecount').innerText = bedBreath
            // document.querySelector('.heartRatecount').innerText = bedHeartrate
            document.querySelector('.bodyStatusText').innerText = motion
            this.getCurrentStatusImg(motion)
          } else {
            console.error("获取夜间看护信息失败", res.error_Msg);
          }
      })
    },
    // 创建mq连接
    connectMq() {
      console.log("创建mq连接", MQTT_SERVICE, mqttoptions);
      let that = this;
      //未创建mq
      if (!this.nightClient) {
        that.nightClient = mqtt.connect(MQTT_SERVICE, mqttoptions);
        // console.log("mqtt是否链接成功", that.nightClient.connected);
        if (!that.nightClient.connected) {
          // mqtt连接
          that.nightClient.on("connect", () => {
            console.log("**************夜间看护mq连接成功**************",MQTT_SERVICE);
            that.Connected = true; //ws连接成功
            //连接成功后订阅消息
            that.nightClient.subscribe('record_bedbreath_minute_detail'); //睡眠呼吸率
            that.nightClient.subscribe('record_bedheartrate_minute_detail'); // 睡眠心率
            that.nightClient.subscribe('user_state_mapping'); //在离床状态
            that.nightClient.subscribe('record_sleepstatus_minute_detail'); //睡眠状态
            that.nightClient.subscribe('UserSleepStatus'); //睡眠阶段
            that.nightClient.subscribe('record_bedturnover_minute_detail'); // 体动幅度
          });
        }
        // 断开发起重连
        that.nightClient.on("reconnect", () => {
          console.log("夜间看护mqtt重连中");
        });
        // 连接成功后接收消息
        that.nightClient.on("message", (topic, message) => {
          message = JSON.parse(message.toString())
          
          if(typeof message == "string"){
            message = JSON.parse(message)
            
          } 
          // 获取睡眠心率数据
          if (topic == 'record_bedheartrate_minute_detail' && message.SensorId == this.sleepSensorId) {
            console.log('心率mq',message);
            this.currentHearthData = message.Count
            const currentElement = document.querySelector('.heartRatecount')
            const currenttext = currentElement.innerText
            document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
            if(this.timeid1){
              clearTimeout(this.timeid1);
            }
              this.timeid1 = setTimeout(() => {
                this.currentHearthData = null
                // currentElement.innerText = "--";
              }, 30*1000);
            // console.log("this.heartRateData",this.heartRateData);
            currentElement.innerText = message.Count;
            if(currenttext !== currentElement.innerText){
                // 跳动动画
                this.showhearthratestyle = true
                setTimeout(()=>{
                    this.showhearthratestyle = false
                }, 1000); 
            }
          }
          // 获取睡眠呼吸率数据
          if (topic =='record_bedbreath_minute_detail' && message.SensorId == this.sleepSensorId) {
            // this.getBearthRateChart(message.Count);
            this.currentBearthData = message.Count
            const currentElement = document.querySelector('.bearthRatecount')
            const currenttext = currentElement.innerText
            document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
            if(this.timeid0){
              clearTimeout(this.timeid0);
            }
              this.timeid0 = setTimeout(() => {
                this.currentBearthData = null
                // currentElement.innerText = "--";
              }, 30*1000);
            currentElement.innerText = message.Count;
            if(currenttext !== currentElement.innerText){
                // 跳动动画
                this.showbreathstyle = true
                setTimeout(()=>{
                    this.showbreathstyle = false
                }, 1000); 
            }
            // console.log("呼吸率数据", message.Count);
          }
          // 获取在离床状态数据  stateType=4 在床，其他状态为离床
          if (topic =='user_state_mapping' && message.user_id == this.currentUserId) {
            console.log('在离床mq',message);
            const currentElement = document.querySelector('.bedstatusText')
            const currenttext = currentElement.innerText
            if (parseInt(message.stateType) == 4) {
                // 在床
                currentElement.innerText = '在床';
                document.querySelector('.bedcontent').style.color = 'green';
                document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
                console.log('在床',new Date().Format("yyyy-MM-dd hh:mm:ss"))
            } else {
                // 离床
                currentElement.innerText = '离床';
                document.querySelector('.bedcontent').style.color = 'red';
                document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
                console.log('离床',new Date().Format("yyyy-MM-dd hh:mm:ss"))
                clearTimeout(this.timeid0);
                clearTimeout(this.timeid1);
                clearTimeout(this.timeid2);
                clearTimeout(this.timeid3);
                clearTimeout(this.timeid4);
                this.currentHearthData = null
                this.currentBearthData = null
                document.querySelector('.bearthRatecount').innerText = "--";
                document.querySelector('.heartRatecount').innerText = "--";
                document.querySelector('.bodyStatusText').innerText = 0;
                document.querySelector('.sleepStatusText').innerText = "--";
                this.getCurrentStatusImg(0)
            }
            if(currenttext !== currentElement.innerText){
                // 跳动动画
                this.showbedstatusstyle = true
                setTimeout(()=>{
                    this.showbedstatusstyle = false
                }, 1000); 
            }
            
            if(this.timer5){
              clearTimeout(this.timer5)
            }
            //边框闪烁三次
            this.showbedstatusstyle0 = true
            this.timer5 = setTimeout(() => {
              this.showbedstatusstyle0 = false
              console.log('在离床边框闪烁结束',this.showbedstatusstyle0);              
              this.timer5 = null
            }, 11 * 1000)
          }
          // // 获取睡眠阶段数据
          // if(topic =='UserSleepStatus' && message.user_id == this.currentUserId){
          //   console.log('睡眠阶段mq',message);

          //   const currentElement = document.querySelector('.bearthRatecount')
          //   const currenttext = currentElement.innerText
          //   if(this.timeid2){
          //     clearTimeout(this.timeid2);
          //   }
          //   this.timeid2 = setTimeout(() => {
          //     currentElement.innerText = "--";
          //   }, 30*1000);

          //   if (message.cycles[message.cycles.length - 1].stage =='awake') {
          //       currentElement.innerText = '清醒';
          //       currentElement.style.color = '#8A8A8A';
          //   } else if (message.cycles[message.cycles.length - 1].stage == 'light') {
          //       currentElement.innerText = '浅睡';
          //       currentElement.style.color = '#5788C6';
          //   }
          //   else if (message.cycles[message.cycles.length - 1].stage == 'rem') {
          //       currentElement.innerText = 'REM';
          //       currentElement.style.color = '#77D2EF';
          //   } else {
          //       currentElement.innerText = '深睡';
          //       currentElement.style.color = '#714890';
          //   }  
          // }
          // 获取睡眠状态数据
          if(topic =='record_sleepstatus_minute_detail' && message.SensorId == this.sleepSensorId){
                console.log('睡眠状态mq',message);
                const currentElement = document.querySelector('.sleepStatusText')
                const currenttext = currentElement.innerText
                document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
                if(this.timeid3){
                  clearTimeout(this.timeid3);
                }
                this.timeid3 = setTimeout(() => {
                  // currentElement.innerText = "--";
                }, 30*1000);
                if (message.Count == 1) { 
                    currentElement.innerHTML = '休息';
                } else if(message.Count == 2){
                    currentElement.innerHTML = '清醒';
                }else{
                    currentElement.innerHTML = '--';
                }
                if(currenttext !== currentElement.innerHTML){
                    // 跳动动画
                    this.showsleepstatusstyle = true
                    setTimeout(() => {
                      this.showsleepstatusstyle = false
                    }, 1000);
                }
                if(this.timer6){
                  clearTimeout(this.timer6)
                }
                this.showsleepstatusstyle0 = true
                this.timer6 = setTimeout(() => {
                  this.showsleepstatusstyle0 = false
                  this.timer6 = null
                }, 11*1000);
          }
          // 获取体动幅度数据
          if (topic == 'record_bedturnover_minute_detail' && message.SensorId == this.sleepSensorId) {
            console.log('体动幅度mq',message);
            const currentElement = document.querySelector('.bodyStatusText')
            const currenttext = currentElement.innerText
            document.querySelector('.statusTime').innerText = new Date().Format("yyyy-MM-dd hh:mm:ss");
            if(this.timeid4){
              clearTimeout(this.timeid4);
            }
            this.timeid4 = setTimeout(() => {
              // currentElement.innerText = "--";
              // this.getCurrentStatusImg(0)
            }, 30*1000);
            // console.log("体动幅度数据", message.Count);
            currentElement.innerText = message.Count;
            this.getCurrentStatusImg(message.Count)
            if(currenttext !== currentElement.innerText){
                // 跳动动画
                this.showbodystatusstyle = true
                setTimeout(() => {
                  this.showbodystatusstyle = false
                }, 1000);
            }
            this.showbodystatusstyle0 = true
            if(this.timer7){
              clearTimeout(this.timer7)
            }
            this.timer7 = setTimeout(() => {
              this.showbodystatusstyle0 = false
              this.timer7 = null
            }, 11*1000);

          }
        });
        //如果连接错误，打印错误
        that.nightClient.on("error", function (err) {
          console.log("夜间看护mq连接错误了 err=>", err);
          // that.Connected = false;
          if (that.Connected) {
            that.nightClient.end();
          }
          that.Connected = false;
        });
      }
    },

    // 获取当前体动幅度对应的图片
    getCurrentStatusImg(count){
      if (count == 0) {
      // 方式一：使用 require
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor0.jpg');
      // document.querySelector('.statusImg').src = '../../assets/images/nightcare/xinhaor0.jpg';
      } else if (count > 0 && count <= 30) {
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor1.jpg');
      } else if (count > 30 && count <= 55) {
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor2.jpg');
      } else if (count > 55 && count <= 80) {
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor3.jpg');
      } else if (count > 80 && count <= 100) {
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor4.jpg');
      } else if (count > 100) {   
        document.querySelector('.statusImg').src = require('../../assets/images/nightcare/xinhaor5.jpg');
      }
    },
    // 获取xaxios数据
    getXaxiosData() {
      this.timeid = setInterval(() => {
        this.xAxisData = new Array(181).fill(null).map((_, index) => {
          const date = new Date();
          date.setSeconds(date.getSeconds() - (181 - index)); // 生成最近3分钟的时间
          return date.Format("hh:mm:ss"); // 格式化时间为 hh:mm:ss
        });
        // if(this.bearthRateData.length > 181) {
        //   this.bearthRateData.shift();
        // }
        // if(this.heartRateData.length > 181) {
        //   this.heartRateData.shift();
        // }
        this.bearthRateData.shift();
        this.heartRateData.shift();
        if(this.currentBearthData){
          this.bearthRateData.push(this.currentBearthData)
        }else{
          this.bearthRateData.push(null)
          this.currentBearthData = null
        }
        if(this.currentHearthData){
          this.heartRateData.push(this.currentHearthData)
        }else{
          this.heartRateData.push(null)
          this.currentHearthData = null
        }

        if(this.heartEchart){
          this.heartEchart.setOption({
              xAxis: {
                  data: this.xAxisData
              },
              series: [{
                  data: this.heartRateData
                }]
          });
        }
        if(this.bearthEchart){
          this.bearthEchart.setOption({
              xAxis: {
                  data: this.xAxisData
              },
              series: [{
                  data: this.bearthRateData
                }]
          });
        }


      }, 1000); // 每3秒获取一次数据
    },
    // 获取心率图表
   getHeartRateChart() {
      // if(data !== undefined && data !== null && data !== '' && !isNaN(data)) {
      //   this.heartRateData.push({value: data,time: new Date().Format("hh:mm:ss")});
      // }
      // 初始化心率图表
      this.heartEchart =this.$echarts.init(document.getElementById("heartEchart"));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          }, 
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, // 不显示刻度线
          },
          axisLabel: {
            showMinlabel: true, // 显示最小标签 
            showMaxLabel: true  // 显示最大标签 
          },
          data: this.xAxisData, // 获取时间数据
        },
        yAxis: {
          type: 'value', 
          name: '心率', 
          splitLine: {
            show: true, // 显示网格线
            showMinLine: true, // 显示最小网格线
            showMaxLine: true, // 显示最大网格线
            lineStyle: {
              color: '#ccc', // 网格线颜色
              type: 'line', // 网格线类型
            },
          },
          min: 0, // 设置y轴最小值
          max: 150, // 设置y轴最大值
        },
        series: [
          {
            name: '心率',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: 'rgba(163, 154, 198,1)', // 设置线条颜色
              width: 3, // 设置线条宽度
            },
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(163, 154, 198,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(163, 154, 198, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }, // 设置填充颜色
            },
            data: this.heartRateData, 
          } 
        ],
        grid: {
          top: '10px',
          left: '50px',
          right: '30px',
          bottom: '40px',
        },
      }
      this.heartEchart.setOption(option);
      window.addEventListener("resize", ()=>{
        if(this.heartEchart){
         this.heartEchart.resize();
        }
      }); // 窗口大小变化时重新渲染图表
    },
    // 获取呼吸率图表
    getBearthRateChart() {
      // if(data !== undefined && data !== null && data !== '' && !isNaN(data)) {
      //   this.bearthRateData.push({value: data,time: new Date().Format("hh:mm:ss")});
      // }
      this.bearthEchart = this.$echarts.init(document.getElementById('bearthEchart'));
      // this.bearthRateData.push({data: data,time: new Date().Format("yyyy-MM-dd hh:mm:ss")});
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          }, 
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, // 不显示刻度线
          },
          axisLabel: {
            showMinlabel: true, // 显示最小标签 
            showMaxLabel: true  // 显示最大标签 
          },
          data: this.xAxisData, // 获取时间数据
        },
        yAxis: {
          type: 'value', 
          name: '呼吸率', 
          splitLine: {
            show: true, // 显示网格线
            showMinLine: true, // 显示最小网格线
            showMaxLine: true, // 显示最大网格线
            lineStyle: {
              color: '#ccc', // 网格线颜色
              type: 'line', // 网格线类型
            },
          },
          min: 0, // 设置y轴最小值
          max: 40, // 设置y轴最大值
        },
        series: [
          {
            name: '呼吸率',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: 'rgba(7, 8, 216,1)', // 设置线条颜色
              width: 3, // 设置线条宽度
            },
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(69, 64, 251,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(69, 64, 251, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }, // 设置填充颜色
            },
            data: this.bearthRateData, 
          } 
        ],
        grid: {
          top: '10px',
          left: '50px',
          right: '30px',
          bottom: '40px',
        },
      }
      this.bearthEchart.setOption(option);
      window.addEventListener("resize", ()=>{
        if(this.bearthEchart){
         this.bearthEchart.resize();
        }// 窗口大小变化时重新渲染图表
      }); 
    },
    // 退出当前页面
   logout() {
    this.nightClient.end()
    this.timeid && clearInterval(this.timeid); 
    this.timeid = null// 清除定时器
    console.log("清除定时器", this.timeid);
      this.$router.push("/");
    }
  },
};
</script>
<style scoped>
#box{
    padding: 1.875rem;
    padding-left: 3.75rem;
    position: relative;
    background-color: #f0f8ff;
    font-family: Arial, sans-serif;
}
.current{
    width: 90rem;
}
.topIcon{
    position: fixed;
    z-index: 1000;
    right: 1.875rem;
    top: 1.875rem;
}
.topIcon,
.topIcon img {
  width: 3.5rem;
  height: 3.5rem;
  /* margin-right: 2rem; */
  cursor: pointer;
  z-index: 1;
}
.currentStatus{
    display: flex;
    justify-content: space-between;
    /* margin-top: 1.25rem;  */
}
.currentStatusItem{
    height: 11.25rem;
    background-color: #fff; 
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.625rem;  
    /* box-sizing: border-box; */
    padding: 1.25rem;
}
.bedstatus{
    width: 45%;
}
.sleepstatus{
    width: 20%;
}
.bodystatus{
    width: 20%;
}
.title{
    height: 1.25rem;
    width: 100%;
    line-height: 1.25rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    color: #333; 
    margin-bottom: 0.625rem;
}
.bedcontent{
    height: 6.25rem;
    width: 100%;
    margin-top: 1.875rem;
    line-height: 5rem; 
    text-align: center;
    font-size: 4rem;
    color: red;
}
.statusTime{
    height: 1.875rem;
    width: 100%;
    line-height: 1.875rem;
    text-align: right;
    font-size: 1.25rem;
    color: #666;
}
.content{
    height: 9.375rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.statusIcon{
    height: 5.625rem;
    width: 7.5rem;
    margin-right: 0.625rem; 
}
.statusImg,.statusImg0{
    height: 5.625rem;
    width: 5.625rem;
}
.statusText{
    height: 5.625rem;
    width: 7.5rem;
    line-height: 5.625rem;
    text-align: center;
    color: #999;
    font-size: 2.5rem;
    font-weight: bold;
}
.bodyStatusText{
    color: #0b0b0b;
}
.chartBox{
    width: 100%;
    margin-top: 1.875rem;
}
.chartItem{
    width: 100%;    
    height: 17rem;
    display: flex;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.625rem;
    padding: 1.875rem;
    margin-bottom: 1.875rem;
}
.chartItem:last-child{
    margin-bottom: 0;
}
.title0{
    width: 7%;
}
.title1{
   text-align: center;
   margin-bottom: 2.5rem;
}
.heartRate, .bearthRate {
  display: flex;
  justify-content: center;
  flex-wrap:nowrap;
  overflow:visible;
}
.heartRate {
  color: rgba(163, 154, 198,1);
  font-weight: bold;
  line-height: 5rem;
}
.bearthRate{
   color: rgba(7, 8, 216,1);
   font-weight: bold;
   line-height: 5rem;
}
.bearthRatecount,
.heartRatecount{
    font-size: 2.5rem;
}
.unit{
  width:  3.125rem;
  font-size: 1.25rem;
  padding: 0.3125rem;
  font-weight: 400;
  white-space:nowrap;
}
.legend, 
.legend0{
  height: 0px;
  width: 3rem;
  margin: 0 auto;
  border-top: 3px solid rgba(163, 154, 198,1);
}
.legend0{
  border-top: 3px solid rgba(7, 8, 216,1);
}


/* 接收到实时消息时，数据改变跳动动画 */
@keyframes jump {
    0%,100% {
        transform: translateY(0);
        }
    50% {
        transform: translateY(-10px);
    }
}

.jumping {
    animation: jump 1s 1;
}

/* 边框闪烁动画 */
.infoContentxinlv{
  animation: ponitAnimation 2s infinite alternate;
}
@keyframes ponitAnimation{
  0%{
    box-shadow: 1px 1.2px 2.9px 0px rgb(175 175 175), -0.5px -0.5px 1px #f5f4f4;
  }
  
  100%{
    box-shadow: 1px 1.2px 2.9px 0px red, -0.5px -0.5px 1px #f5f4f4;
  }
}

</style>